<template>
  <div class="orderPage">
    <div class="searchCondition">
      <el-form :model="queryParams" ref="queryRef" size="medium" :inline="true" label-width="50px">
        <el-form-item class="formitemwidth">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker style="width: 260px;" clearable start-placeholder="开始日期" end-placeholder="结束日期" v-model="queryParams.date" type="daterange" value-format="YYYY-MM-DD" placeholder="请选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="formitemwidth">
          <el-select v-model="payState" placeholder="请选择付款状态">
            <el-option v-for="item in payStateOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="formitemwidth">
          <el-select v-model="emissionControlState" placeholder="请选择">
            <el-option v-for="item in emissionControlStateOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="formitemwidth">
          <el-select v-model="effective" placeholder="请选择">
            <el-option v-for="item in effectiveOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="formitemwidth">
          <el-input placeholder="关键词检索" suffix-icon="el-icon-search" v-model="keyword"></el-input>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search">检索</el-button>
      </el-form>
      <div class="serachRight">
        <span class="right-span">剩余:9443.73点</span>
        <el-button type="primary" plain icon="el-icon-circle-plus">创建订单</el-button>
        <i class="right-icon el-icon-refresh-right"></i>
        <i class="right-icon el-icon-download"></i>
        <i class="right-icon el-icon-printer"></i>
      </div>
    </div>
    <div class="tabledata">
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort = "{prop: 'date', order: 'descending'}"
        stripe
        :header-cell-style="{ background: '#f1f1f1' }"
        >
        <el-table-column
          prop="date"
          label="日期"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          :formatter="formatter">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showSearch: true,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          date: null,
        },
        options: [{
          value: '下单时间',
          label: '下单时间'
        }],
        value: '',
        payStateOptions: [{
          value: '1',
          label: '所有付款时间'
        }],
        payState: '',
        emissionControlStateOptions: [{
          value: '1',
          label: '所有排控状态'
        }],
        emissionControlState: '',
        effectiveOptions: [{
          value: '1',
          label: '有效'
        }],
        effective: '',
        keyword: '',
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    created() {
      this.setMR()
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      setMR() {
        this.value = this.options[0].value
        this.payState = this.payStateOptions[0].value
        this.emissionControlState = this.emissionControlStateOptions[0].value
        this.effective = this.effectiveOptions[0].value
      }
    },
  }
</script>

<style scoped lang="scss">
  .orderPage {
    padding: 20px;
    background-color: #fff;
    .searchCondition {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .formitemwidth {
        width: 130px;
      }
      .serachRight {
        display: flex;
        align-items: center;
        margin-bottom: 22px;
        .right-span {
          margin-right: 15px;
        }
        .right-icon {
          border: 1px solid #f5f5f5;
          padding: 10px;
          font-size: 14px;
          border-radius: 4px;
        }
      }
    }

  }
</style>
